<template>
  <div class="act" @click="toDetail">
    <p>{{actItem.atitle}}</p>
    <img :src="imgurl" alt="">
    <div>
      <span>活动类型：{{actItem.atype}}</span>
    </div>
    <div>
      <span>剩余人数：{{actItem.anumber}}</span>
    </div>
    <div>
      <span>创建者：{{actItem.acreateuser}}</span>
    </div>
  </div>
</template>

<script>
// import {getActList, getTypeImg} from "@/network/home";
// import {debounce} from "@/common/utils";

export default {
  name: "ActListItem",
  props: {
    actItem: {
      type: Object,
      default(){
        return {}
      }
    },
    actTotal:{
      type: Object,
      default(){
        return {}
      }
    },
    imgs:{
      type:Object,
      default() {
        return {}
      }
    }
  },
  data(){
    return{
      imgurl: "",
    }
  },
  computed :{
    // proImg(){
    //   this.imgurl = require("@/assets/image/" + this.actItem.atype + ".png")
    //   console.log(this.imgurl)
    //   return this.imgurl
    // }
  },
  mounted() {
    this.imgurl = require("@/assets/image/" + this.actItem.atype + ".png")
    // console.log(this.actTotal.pk)
    // console.log(this.actItem.atype)//travel
    // this.imgurl = this.imgs[this.actItem.atype]
    // console.log(this.imgurl)
  },
  updated() {
    this.imgurl = require("@/assets/image/" + this.actItem.atype + ".png")
  },
  methods:{
    toDetail(){
      this.$router.push('/detail/' + this.actTotal.pk)
    }
  }


}
</script>

<style scoped>
.act {
  flex: 0 1 auto;
  width: 24%;
  height: 48.5%;
  margin-left: .77%;
  margin-top: .23%;
  background-color: #f7f3f3;
  border: 2px solid #bbbbbb;
  box-sizing: border-box;
  overflow: hidden;
  /*min-height: 200px;*/
}
img {
  width: 100%;
  height: 60%;
}
</style>